<template>
  <div class="page-container">
    <el-table :data="goodsList">
      <el-table-column type="expand">
        <template #default="props">
          <div class="expanded-content">
            <div class="row">
              <div class="col">商品分类: {{ props.row.state }}</div>
              <div class="col">市场价: {{ props.row.city }}</div>
            </div>
            <div class="row">
              <div class="col">成本价: {{ props.row.address }}</div>
              <div class="col">收藏: {{ props.row.zip }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="ID" prop="id" width="100"></el-table-column>
      <el-table-column label="商品图" prop="titleImage" width="100">
        <template #default="scope">
          <el-image :src="imageBase + scope.row.titleImage" style="width: 30px; height: 30px;"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="goodsName"></el-table-column>
      <el-table-column label="商品售价" prop="price" width="100"></el-table-column>
      <el-table-column label="销量" prop="number" width="100"></el-table-column>
      <el-table-column label="库存" prop="stock" width="100"></el-table-column>
      <el-table-column label="排序" prop="sort" width="100"></el-table-column>
      <el-table-column label="添加时间" prop="createTime" width="200"></el-table-column>
      <el-table-column fixed="right" label="状态" prop="createTime" width="100">
        <template #default="scope">
          <el-switch
              v-model="scope.row.status"
              class="ml-2"
              inline-prompt
              active-text="上架"
              inactive-text="下架"
              active-value="1"
              inactive-value="0"
              @change="changeStatus(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" prop="createTime">
        <template #default="scope">
          <el-button link type="primary" size="small">详情</el-button>
          <el-button link type="primary" size="small">编辑</el-button>
          <el-button link type="primary" size="small" @click="recycle(scope.row.id)">加入回收站</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {defineProps, getCurrentInstance} from 'vue';
import {ElMessage} from "element-plus";
const axios = getCurrentInstance().appContext.config.globalProperties.$axios
const imageBase = 'http://localhost:8081/upload/'

defineProps({
  goodsList: {
    // eslint-disable-next-line vue/require-valid-default-prop
    default: [],
    type: Array,
  }
});

// 商品上架/下架
const changeStatus = async (row) => {
  let res = await axios.put(`/goods/status/${row.id}/${row.status}`);
  console.log(res)
}
const recycle = async (id) => {
  let res = await axios.put(`/goods/recycle/${id}`);
  if (res.data.code === "1") {
    ElMessage.success("加入回收站成功")
  } else {
    ElMessage.error("加入回收站失败")
  }
}
</script>

<style scoped>
.expanded-content {
  padding: 12px 50px; /* 与表格主体对齐 */
}

.row {
  display: flex;
  margin-bottom: 12px;
}

.col {
  flex: 1;
  min-width: 200px;
  padding: 0 15px;
  position: relative;
}

.col:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  width: 1px;
  background-color: #ebeef5;
}
</style>
